<template>
  <div>
    <el-row :gutter="10" type="flex" align="middle" class="t">
      <el-col :span="6">邀请链接</el-col>
      <el-col :span="14">
        <span class="sj" @click="copy(queryUrl)">{{ queryUrl }}</span>
      </el-col>
      <el-col :span="5">
        <el-button size="mini" @click="refresh()">刷新链接</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10" type="flex" align="middle" class="t">
      <el-col :span="6">邀请二维码</el-col>
      <el-col :span="16">
        <div @click="download()" ref="qrCodeDiv" class="invite">
          <div class="invite_p">姓名：{{ item.name }}</div>
          <div id="qrcode" style="width: 120px;height: 120px;margin: 0 auto"/>
          <div class="invite_p">iphone请用原生浏览器（相机扫码即可）</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import QRCode from 'qrcode'
  import {qrSet, downloadImg} from "@/utils/options"
  import {setAuthCode} from "@/api/system/query"

  export default {
    name: "invite-query",
    props: {
      item: {
        required: true,
        type: Object
      },
      sct: {
        default: '',
        type: String
      }
    },
    data() {
      return {
        queryUrl: null,
        qrcode: null
      }
    },
    created() {
      this.makeQrCode(this.item.authCode)
    },
    methods: {
      copy(text) {
        this.$clipboard(text)
        this.$modal.msgSuccess('已复制')
      },
      makeQrCode(ac) {
        this.queryUrl = window.location.origin + '/refer?ID=' + this.item.queryId + '&ac=' + ac + '&sct=' + this.sct
        this.$nextTick(() => {
          if (this.qrcode) {
            this.qrcode.clear()
            this.qrcode.makeCode(this.queryUrl)
          } else {
            this.qrcode = new QRCode('qrcode', {
              text: this.queryUrl,
              ...qrSet
            })
          }
        })
      },
      refresh() {
        this.$modal.loading("刷新中...")
        setAuthCode(this.item.queryId).then(res => {
          if (res.code == 200) {
            this.makeQrCode(res.msg)
          }
          this.$modal.closeLoading()
        })
      },
      download() {
        downloadImg(this.$refs.qrCodeDiv)
      }
    }
  }
</script>

<style lang="scss">
  .t {
    font-size: 15px;
    padding-bottom: 4px;
  }

  .sj {
    color: rgb(64, 158, 255);
  }

  .invite {
    width: 160px;
    padding: 5px 16px 15px 16px;
    border-radius: 5px;
    background-color: #e4e8ec;
    text-align: center;
    font-size: 10px
  }

  .invite_p {
    width: 120px;
    padding: 8px 0;
    text-align: center;
  }
</style>


